<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CRM</title>
    <link rel="icon" href="img/loginlogo.jpg" type="image/jpg">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
    <script>
        // 清除cookie的函数
        function clearCookie(name) {
            var date = new Date();
            date.setTime(date.getTime() - 1000); // 设置为过去的时间，强制过期
            document.cookie = name + "=;expires=" + date.toUTCString() + ";path=/";
        }

        function setCookieForever(name, value) {
            var date = new Date();
            date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); // 设置为一年后过期
            document.cookie = name + "=" + value + ";expires=" + date.toUTCString() + ";path=/";
        }

        function getCookie(name) {
            let cookies = document.cookie.split('; ');
            for (let i = 0; i < cookies.length; i++) {
                let parts = cookies[i].split('=');
                if (parts[0] === name) {
                    return parts[1];
                }
            }
            return '';
        }

        function printCookie(name) {
            let cookieValue = getCookie(name);
            return cookieValue;
        }

        function login () {
            addMask();
            document.getElementById('loader').classList.add('active');
            document.getElementById('loginbutton').style.pointerEvents = 'none';

            var login_name = document.getElementById("login_name").value;
            var login_pwd = document.getElementById("login_pwd").value;

            // 修改为记住用户名逻辑
            var rememberUsername = document.getElementById("rememberUsername").checked;
            if (rememberUsername) {
                // 只保存用户名cookie
                setCookieForever("username", login_name);
                setCookieForever("rememberUsername", "true");
            } else {
                // 未勾选时清除用户名cookie
                clearCookie("username");
                clearCookie("rememberUsername");
            }

            fetch('/crm/getData?login_name='+encodeURIComponent(login_name)+'&login_pwd='+encodeURIComponent(login_pwd))
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    if (data.result == "false") {
                        document.getElementById("error").innerHTML=data.msg;
                        removeMask();
                        document.getElementById('loader').classList.remove('active');
                        document.getElementById('loginbutton').style.pointerEvents = 'auto';
                    } else {
                        document.getElementById("error").innerHTML="";
                        window.location.href = data.msg;
                    }
                })
                .catch(error => console.error('Unable to get data.', error));
        }

        // 添加遮罩
        function addMask() {
            var mask = document.getElementById('mask');
            mask.style.display = 'block';
        }

        // 移除遮罩
        function removeMask() {
            var mask = document.getElementById('mask');
            mask.style.display = 'none';
        }

        window.onload = function() {
            // 强制默认不勾选
            document.getElementById("rememberUsername").checked = false;

            var newWindowWidth = window.screen.width;
            var newWindowHeight = window.screen.height;
            document.body.style.width = (newWindowWidth-10)+"px";
            document.body.style.height = (newWindowHeight-190)+"px";
            removeMask();

            // 只回显用户名，不回显密码
            if (printCookie('rememberUsername') === "true") {
                document.getElementById("login_name").value = printCookie('username') || '';
                document.getElementById("rememberUsername").checked = true;
            }

            // 绑定回车登录
            document.addEventListener('keydown', function(event) {
                if (event.key === "Enter") {
                    login();
                }
            });

            // 额外的防自动填充措施
            setTimeout(() => {
                document.getElementById('login_pwd').value = '';
            }, 100);
        };
    </script>
    <style>
        .div1, .div2, .div4 {width:100%;}
        .topimg {padding-left: 40px;padding-top: 61px;}
        .span1 {padding-left: 108px;}
        .span2 {padding-left: 35px;}
        .div3 {width: 350px;height: 400px;background-color: #ffffff;margin-right: 14%;border-radius: 8px;text-align: center;border: 1px solid #cbcbcb;}
        .zclogo {width:40%;margin-top: 15%;}
        .login {background: #25396a !important;border:1px solid #4176BA;width:240px;height:38px;margin-top: 8%;cursor: pointer;
            color: #fff;
            font-size: 13pt;
            font-family: "Helvetica Neue Regular", "Helvetica Neue", Helvetica, sans-serif;
            text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
            font-weight: 300;}
        .span1, .span2 {width: 128px;
            height: 77px;
            font-family: DingTalk JinBuTi, DingTalk JinBuTi;
            font-weight: 400;
            font-size: 64px;
            color: #328ADB;
            line-height: 75px;
            text-shadow: 2px 2px 0px #FFFFFF;
            text-align: left;
            font-style: normal;}
        .container {width: 100%;height: 100%;background-image: url('img/background.png');
            background-repeat: repeat;
            background-size: 100% 100%;}
        body {background-color: #F2F5F6;
        }
        .inputdiv {
            width: 300px;margin-left: 25px;border-color: #9e9e9e2b;height: 45px;
        }
        .inputdiv input {
            height: 30px;width: 200px;
        }
        /* 隐藏浏览器自动填充的背景色 */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
            box-shadow: 0 0 0 1000px white inset !important;
        }
        /* 遮罩和加载动画样式 */
        #mask {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9998;
        }
        .loader {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        .loader.active {
            display: block;
        }
        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
    </style>
    <script>
        window.addEventListener('resize', function() {
            document.getElementById("div1").style.width="100%";
            document.getElementById("div2").style.width="100%";
        });
    </script>
</head>
<body style="overflow: auto;">
<div id="mask"></div>
<div class="loader" id="loader"></div>
<div class="container">
    <div class="content">
        <div class="div1" id="div1">
            <img src="img/crrc_logo.png" class="topimg"/>
        </div>
        <div class="div2" id="div2">
            <div style="float: left;padding-top:6%;">
                <span class="span1">虔诚</span>
                <span class="span2">实干</span>
                <span class="span2">奋斗</span>
                <span class="span2">创新</span>
            </div>
            <div class="div3" style="float: right;margin-top:6%;">
                <img src="img/zclogo.png" class="zclogo">
                <div style="margin-top: 10%">
                    <div class="inputdiv">
                        <img src="img/user188.png" width="28" height="28" title="用户名" alt="用户名">
                        <input type="text" id="login_name" placeholder="用户名"
                               autocomplete="username" autocorrect="off" autocapitalize="off">
                    </div>
                    <div class="inputdiv">
                        <img src="img/lock188.png" width="28" height="28" title="密码" alt="密码">
                        <input type="password" id="login_pwd" placeholder="密码"
                               autocomplete="new-password" readonly
                               onfocus="this.removeAttribute('readonly'); this.type='password'"
                               autocorrect="off" autocapitalize="off">
                    </div>
                    <div style="text-align: left;margin-left: 84px;">
                        <input type="checkbox" id="rememberUsername" name="rememberUsername">
                        <label>记住账号</label>
                    </div>
                    <button class="login" id="loginbutton" onclick="login()"> 登录 </button>
                    <div id="error" style="color:red;margin-top: 8%"></div>
                    <div style="color:red;margin-top: 8%">非涉密系统，严禁处理国家秘密（标注秘密、机密、绝密的文件资料）</div>
                </div>
            </div>
        </div>
        <div class="div4" id="div4" style="float: left;text-align: center;padding-top: 5%;">
            <span style="font-weight: bold;letter-spacing: 3px;">销售管理数字化平台</span>
        </div>
    </div>
</div>
</body>
</html>
